<template>
    <div class="login_container">

        <div class="login_box">

            <div class="avatar_box">
                <img src="../assets/logo.png"/>
               
            </div>

            <!--登录表单-->
             <el-form ref="loignFormRef" :model="loginForm" :rules="rules" label-width="0px" class="login_form">
                <el-form-item prop="username">
                    <!-- v-model 双向绑定 -->
                    <el-input  v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
                </el-form-item>

                 <el-form-item prop="password">
                    <el-input v-model="loginForm.password" type="password" prefix-icon="el-icon-more"></el-input>
                </el-form-item>

                <el-form-item class="btns">
                    <el-button  type="primary" @click="login">登录</el-button>
                    <el-button type="info" @click="resetLoginForm">重置</el-button>
                </el-form-item>
                

            </el-form>

        </div>

    </div>
</template>

<script>
export default {
    

  data(){
        return{

        loginForm:{
            username:'admin',
            password:'123456'
        },
        rules: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
           password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
          ]
        }
    }
  },

  methods:{
    resetLoginForm(){

        // console.log(this);
        // resetFields 重置表单
        this.$refs.loignFormRef.resetFields();


    },
    login(){

            // this.$router.push("/home");
        this.$refs.loignFormRef.validate(async valid => {
            //valid 是校验的返回值 true 或者false
            // console.log(valid);
            if(!valid) return; // 校验失败直接返回
            // 发起请求  post ，两个参数，，第一个为请求路径，第二个为请求参数
            // 参数可以直接{} 因为表单数据绑定到loginForm对象上，在这里就直接使用this.loginForm携带 
           // 注意要保证后台服务器运行中
           const { data:res}  = await this.$http.post("login",this.loginForm) //await 只能使用在async 修饰的方法中
        //   console.log(result); // 打印返回值promise 对象 可以使用await简化
       //    console.log(res)

           // 异步请求成功 result对象是axios封装的6个属性，里面的data才是服务器返回的真实数据

        // p判断data中状态吗
       if(res.meta.status != 200) return this.$message.error("登录失败")
        // console.log("登录成功");
        this.$message.success("登录成功")

        //1. 登录成功后 将token 保存到客户端sessionStorage中

       window.sessionStorage.setItem("token",res.data.token)
        //2. 通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push("/home")




        })

    }
  }
}
</script>



<style lang="less" scoped>

//  使用less语法，需要添加less-loader依赖，less依赖(开发依赖)  ，，，重新启动项目

 .login_container{
     height: 100%;
     width: 100%;

     background-color: #10337c;
 }

    .login_box{
        width: 450px;
        height: 300px;
        background-color: #fff;
        border-radius: 3px;
        position:absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);

        .avatar_box{
            height: 130px;
            width: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: #fff;
          img{
              width: 100%;
              height: 100%;
              border-radius: 50%;
              background-color: #eee;
          }
        }
    }

    .login_form{
        position:absolute;
        bottom:0px;
        width: 100%;
        padding: 0px 20px;
        box-sizing:border-box ;
    }
    .btns{
        display: flex;
        justify-content: flex-end;
    }
</style>